NaN

css选择器

(1) 在html中使用样式

  1. 内联样式
  2. 内部样式
  3. 外部样式

1-2内联样式和内部样式

<!DOCTYPE html>
<html>
<head>
    <style>
        <!-- 内部样式 -->
        p {
            color: green;
            font-size: 30px;
        }
    </style> 
</head>
<body>
    <h3>我的第x个网页</h3>
    <!-- 内联样式 -->
    <div style="color:red;font-size: 25px;">
        我爱web前端<br>
        我爱web前端<br>
        我爱web前端<br> 
    </div>
 
    <p>
        我爱web前端<br>
        我爱web前端<br>
        我爱web前端<br> 
    </p>
</body> 
</html>

3 外部样式

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div>
        我爱web前端 <br>
        我爱web前端
    </div>
</body>
</html>

<!-- demo.css -->
div {
    color: red;
    font-size: 30px;
}

(2) 几个简单的css样式

  1. border 边框
  2. width, height 宽高
  3. background-color 背景颜色
  4. color 字体颜色
  5. font-size 字体大小
<!DOCTYPE html>
<html lang="en">
<head>  
    <style>
        div {
            /* 边框: 大小,实线,颜色 */
            border: 2px solid red;
            /* width宽 */
            width: 100px;
            /* height高 */
            height: 100px;
            /* 背景颜色 */
            background-color: #999;
            /* 字体颜色 */
            color: red;
            /* 字体大小 */
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签
    </div> 
</body>
</html>

(3) 元素选择器

常用选择器

  1. 元素选择器
  2. id选择器
  3. 类选择器
  4. 群组选择器
  5. 后代选择器
  6. 子代选择器
  7. 兄弟选择器
  8. nth(n) 选择器
  9. :first-child (伪类选择器)
  10. :last-child (伪类选择器css3新增)
  11. :hover (伪类选择器)
  12. :visited (伪类选择器)
  13. :after (伪类选择器)
  14. css3新增选择器

1.元素选择器 

<!DOCTYPE html>
<html lang="en">
<head> 
   <style>
      div { color: red; }
      p { color: green; }
   </style>
</head>
<body>
   
   <div> 这是div </div>
   <p> 这是p </p> 
   <div>11111111</div>
</body>
</html>

2.id选择器

id必须唯一

<!DOCTYPE html>
<html lang="en">
<head> 
   <style>
      /* id选择器 */
      #aa {
         color: blue;
      }
      #bb {
         color: red;
      }
      #cc {
         color: green;
      }
   </style>
</head>
<body> 
   <div id="aa"> 这是div </div> 
   <div id="bb">11111111</div>
   <div id="cc">22222222</div>
</body>
</html>

3.class选择器 

<!DOCTYPE html>
<html lang="en"> 
<head>
    <style>
        /* class选择器 */
        .red {
            color: red;
        } 
        .pp {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div class="red"> div222222 </div>
    <p> p22222222 </p>
    <span> span </span>
    <br>
    <i class="red"> i22222222222 </i> 
    <p class="pp">p333333333333</p> 
</body> 
</html>

4.群组选择器

选择器之间用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        /* 群组选择器 */
       .box,#aa,p {
           color: red;
           border: 1px solid;
       }
    </style>
</head>
<body>
    <div class="box">box2222222222</div>
    <div id="aa">aa2222222222222</div>
    <p>pppppppppppppppppp</p>
</body>
</html>

5.后代选择器

父元素和子元素之间用空格隔开

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .list1 .item {
            color: green;
        }

       .list2 .item {
           color: red;
       }
    </style>
</head>
<body>
     <ul class="list1">
         <li class="item">1.xxxx</li>
         <li class="item">2.xxxx</li>
         <li class="item">3.xxxx</li>
     </ul>

     <ul class="list2">
        <li class="item">1.xxxx</li>
        <li class="item">2.xxxx</li>
        <li class="item">3.xxxx</li>
    </ul>
</body>
</html>

<!--  demo2 -->
<!DOCTYPE html>
<html lang="en">
<head> 
    <style> 
        .box .bb {
            color: green;
        }

    </style>
</head>
<body>
      <div class="box">
          <div class="aa"> 
              <p class="pp">
                  <span class="bb">
                      这是span元素
                  </span>
              </p>
          </div>
      </div>

      <p>
          <span class="bb">
              这也是span元素
          </span>
      </p>

</body>
</html>

6. 子代选择器 

<!DOCTYPE html>
<html lang="en"> 
<head>
    <style>
        /* 子代选择器 */
        .box>.aa {
            /* color: red; */
           border: 1px solid;
        }
    </style>
</head> 
<body>
    <!-- .box爷爷元素 -->
    <div class="box">
        <div class="aa">
            这是儿子元素
            <div class="aa">
                这是孙子元素
            </div>
        </div>
    </div> 
</body> 
</html>

7. 兄弟选择器 

<!-- demo1 -->
<style>
    .aa+.bb {
        color: red;
    } 
</style>

<div class="box">
    <div class="aa">aaaaa</div>
    <p class="bb">bbbbbb</p>
</div>


<!-- demo2应用 -->
<style>
    /* 除了第一个li之外, 其它li都添加顶部边框 */
    li+li {
        border-top: 1px solid red;
    }
</style>

<ul>
    <li>1.xxx</li>
    <li>2.xxx</li>
    <li>3.xxx</li>
    <li>4.xxx</li>
    <li>5.xxx</li>
</ul>

伪类选择器

8. :nth(n) 选择器 

<!-- demo1 -->
<style>
   li:nth-child(1) {
    color: red;
   }
   li:nth-child(2) {
    color: green;
   }
   li:nth-child(5) {
    color: blue;
   } 
</style>

<ul>
    <li>1.xxx</li>
    <li>2.xxx</li>
    <li>3.xxx</li>
    <li>4.xxx</li>
    <li>5.xxx</li>
</ul>

<!-- demo2 -->
<style>
    p {
        width: 300px;
        height: 50px;
        border: 1px solid red;
    }
    p:nth-child(1) {
        background-color: gray;
    }
    p:nth-child(2) {
        background-color: green;
    }
    p:nth-child(3) {
        background-color: rosybrown;
    }
</style>

<p></p>
<p></p>
<p></p>

<!-- demo3奇数和偶数 -->
<style>
    li:nth-child(even) {
     color: red;
    } 
    li:nth-child(odd) {
     color: blue;
    } 
 </style>
 
 <ul>
     <li>1.xxx</li>
     <li>2.xxx</li>
     <li>3.xxx</li>
     <li>4.xxx</li>
     <li>5.xxx</li>
 </ul>

9. :first-child (第一个)

10. :last-child (最后一个 css3新增) 

<style>
    li:first-child {
        color: red;
    }
    li:last-child {
        color: blue;
    }
 </style>
 
 <ul>
     <li>1.xxx</li>
     <li>2.xxx</li>
     <li>3.xxx</li>
     <li>4.xxx</li>
     <li>5.xxx</li>
 </ul>

11. :hover (移动到元素上)

12. :visited (访问过) 

<style>
    /* 伪类选择器 */
     a:link {
        color: #999;
     }
     a:hover {
         color: blue;
     }
     a:visited {
         color: red;
     }
 </style>
 

 <a href="#">百度</a>
 <a href="#">新浪</a>

13. :before 和 :after (伪类选择器) 

<style>
    /* 伪类选择器 */
    div {
        border: 1px solid;
        width: 300px;
        height: 200px;
    }
    div:before {
        content: '我是伪类元素before';
        color: red; 
    }
    div:after {
        content: '我是伪类元素after';
        color: blue;
    }
 </style>

 <div> </div>

14. 属性选择器 

<style>
   a[href='http://baidu.com'] {
       border: 1px solid red;
       color: red;
   }
 </style>

<a href="http://baidu.com">百度</a>
<a href="http://sina.com">辛浪</a>

15. emmet语法(了解) 

<!DOCTYPE html>
<html lang="en"> 
<body>
    <!-- 1. div#box 添加id -->
    <div id="box"></div>
    <!-- 2. div.box 添加class-->
    <div class="box"></div>
    <!-- 3. div>p 添加后代元素-->
    <div>
        <p></p>
    </div>
    <!-- 4. div{我爱web} 添加内容 -->
    <div>我爱web</div>
    <!-- 5. input[type=radio]添加属性 -->
    <input type="radio">
    <!-- 6. ul>li{$.xxxx}*5添加列表 -->
    <ul>
        <li>1.xxxx</li>
        <li>2.xxxx</li>
        <li>3.xxxx</li>
        <li>4.xxxx</li>
        <li>5.xxxx</li>
    </ul>
    <!-- 7. ul.list>li.item{$.xxxx}*5 综合 -->
    <ul class="list">
        <li class="item">1.xxxx</li>
        <li class="item">2.xxxx</li>
        <li class="item">3.xxxx</li>
        <li class="item">4.xxxx</li>
        <li class="item">5.xxxx</li>
    </ul> 
</body>
</html>

练习

说出前10个选择器的特征(代码格式)

  1. 元素选择器
  2. id选择器 #
  3. 类选择器 .
  4. 群组选择器 ,
  5. 后代选择器 空格
  6. 子代选择器 >
  7. 兄弟选择器 +
  8. nth-child选择器 :nth-child(n)
  9. 第一个元素 first-child
  10. 最后一个元素 last-child

(4) 选择器优先级

css样式特点

  1. 有些样式可以继承, 比如color, font-zide, line-height等
  2. 可以使用多个选择器对同一个元素同一个样式进行设置
  3. 可以多个class作用在同一个元素上
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            color: red;
            font-size: 30px;
        }
        .aa {
            border: 1px solid;
        }
        .bb {
            font-size: 20px;
        }
        .cc {
            background-color: gray; 
        }
    </style>
</head>

<body>
    <div class="aa bb cc">div标签</div>
    <p>p标签</p>
</body> 
</html>

优先级规则

  1. 内联样式 > 内部样式 > 外部样式 (就近原则)

     <style>
     .box { color: blue; }
     .pp {
         background-color: gray;
         background-color: green;
     }
 </style>

 <div class="box" style="color: red;">
     div元素
 </div>
 <p class="pp">pppppppppp</p>

  2. !important > id选择器 > class选择器 > 元素选择器 > 通配符(*)选择器

    注意: !important能不用就不用, 因为用不好对维护会产生影响

     <style>
     * {
         color: greenyellow;
     } 
      #box {
          color: red;
      }
      .box {
          color: blue!important;
      }
      div {
          color: yellow;
      } 
 </style>

 <div id="box" class="box">
     div元素
 </div>

  3. 都是class的情况下, 一般选择器越"长", 优先级越高

     <style>
     .aa.bb.cc {
          color: green;
      }
      .aa {
          color: red;
      } 
 </style>

 <div class="aa bb cc">
     div元素
 </div> 


 <style>
     .aa .bb .cc {
         color: blue;
     }

    .aa .cc {
        color: red;
    } 
 </style>

<div class="aa">
    <div class="bb">
        <div class="cc">
            div元素
        </div>
    </div>
</div>

(5) 作业

作业要求

  1. 尽量不使用元素选择器
  2. 在不给元素添加额外的id和class来完成任务
  3. 尽量使用多种方法达到目的

题目列表

  1. 给导航栏的选项的字体变成灰色, 并且第一个字体高亮(变红色)

    <!DOCTYPE html>
<html lang="en"> 
  <body>
    <nav class="nav">
      <span class="item">1</span>
      <span class="item">2</span>
      <span class="item">3</span>
    </nav>

    <ul class="list">
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
    </ul>
  </body>
</html>

  2. 把以下列表的最后一个标签去掉边框

    <!DOCTYPE html>
<html lang="en"> 
  <head>
    <style>
      .item {
        width: 200px;
        border-bottom: 1px solid;
      } 
    </style>
  </head>
  <body>
    <ul class="list">
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
    </ul>
  </body>
</html>

  3. 除了第一个以外, 给其他的列表标签添加上边框

    <!DOCTYPE html>
<html lang="en">  
  <body>
    <ul class="list">
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
    </ul>
  </body>
</html>

  4. 修改样式, 把文字变成绿色

    <!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* 在这里写代码 */
      

      .box .span{
        color: red;
      } 
    </style>
  </head>
  <body>
    <div class="box">
      <p class="pp">
        <span class="span"> 这是一个span标签 </span>
      </p>
    </div>
  </body>
</html>

  5. 修改样式, 把字体变成绿色

    <!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* 在这里写代码 */
 
       
    </style>
  </head>
  <body>
    <div id="box">
      <p class="pp">
        <span class="span" style="color: red;"> 这是一个span标签 </span>
      </p>
    </div>
  </body>
</html>

  6. 把class为item的div元素添加边框

    <!DOCTYPE html>
<html lang="en"> 
  <body>
     <div class="item">
       这是div元素
     </div>
     <p class="item">
       这是p元素
     </p>
  </body>
</html>

  7. 项目实战题(1) : 保存百度首页, 并且把百度的按钮背景色改为#c03131色, 输入框获得标点时, 也把边框改为#c03131色

    image-20211206224927295

  8. 项目实战题(2): 修改以下代码, 把字体和字体底部的滚动跳变成#c03d37

    image-20211206230127530

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeName: 'second'
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                }
            }
        })
    </script>
</body>
</html>